<template>
  <el-container>
    <el-aside width="200px">
      <el-row class="left_row" v-for="(item, index) in btnGroup" :key="index">
        <el-button
        class="left_btn"
          :class="btnIndex == index ? 'active':''"
          @click="btnClick(item, index)"
          :autofocus="index == 0 ? true : false"
          >{{ item.name }}</el-button
        >
      </el-row>
    </el-aside>
    <el-container>
      <el-header>
        <el-row class="header-row">
  <el-col :span="12">
<el-select style="width:300px"
:style="{visibility:(select_state?'' : 'hidden')}"
          v-model="selectValue"
          placeholder="请选择"
          @change="selectChange"
        >
          <el-option
            v-for="item in options"
            :key="item.id"
            :value="item.title"
          ></el-option>
        </el-select>
  </el-col>
  <el-col :span="9" class="header-row-right">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="80px" style="display: flex; width:100%;" >
      <el-select v-model="queryParams.chartValueType" placeholder="请选择统计值类型" style="width:300px; flex: 1; text-align: right;" @change="valueTypeChange" v-if="chartflag" >
           <el-option
               v-for="dict in charValueTypeOptions"
               :key="dict.fcode"
               :label="dict.fcontent"
                :value="dict.fcode"
            ></el-option>
      </el-select>
      <el-select v-model="queryParams.topNum" placeholder="请选择展示范围" style="width:300px; flex: 1; text-align: right;" @change="topNumChange" v-if="chartflag" >
           <el-option
               v-for="dict in topNumOptions"
               :key="dict.fcode"
               :label="dict.fcontent"
                :value="dict.fcode"
            ></el-option>
      </el-select>
    <div class="block" v-show="!showdaterange" style="flex: 1; text-align: right;">
      <el-date-picker
        v-model="queryParams.selectMonth"
        type="month"
        placeholder="选择月"
        format="yyyy-MM"
        value-format="yyyy-MM"
        @change="reportSearch">
      </el-date-picker>
    </div>
    <div class="block" v-show="showdaterange" style="flex: 1; text-align: right;">
      <el-date-picker
        v-model="dateRange"
        type="daterange"
        value-format="yyyy-MM-dd"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="reportSearch">
      </el-date-picker>
    </div>
     </el-form>
  </el-col>
  <el-col :span="3" class="header-row-left">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="80px" style="display: flex;">
        <el-button v-if="chartbtn" icon="el-icon-s-data" size="mini" @click="showChart" style="height: 35px;">图表</el-button>
        <el-button icon="el-icon-download" size="mini" @click="export2Excel" style="height: 35px;">导出</el-button>
     </el-form>
  </el-col>
</el-row>
      </el-header>
      <table0_0 v-if="curr == '0_0'" ref="0_0" @reportSearch="reportSearch"></table0_0>
      <table0_1 v-if="curr == '0_1'" ref="0_1" @reportSearch="reportSearch"></table0_1>
      <table0_2 v-if="curr == '0_2'" ref="0_2" @reportSearch="reportSearch"></table0_2>
      <table0_3 v-if="curr == '0_3'" ref="0_3" @reportSearch="reportSearch"></table0_3>
      <table0_4 v-if="curr == '0_4'" ref="0_4" @reportSearch="reportSearch"></table0_4>
      <table0_5 v-if="curr == '0_5'" ref="0_5" @reportSearch="reportSearch"></table0_5>
      <table0_6 v-if="curr == '0_6'" ref="0_6" @reportSearch="reportSearch"></table0_6>
      <table0_7 v-if="curr == '0_7'" ref="0_7" @reportSearch="reportSearch"></table0_7>
      <table0_8 v-if="curr == '0_8'" ref="0_8" @reportSearch="reportSearch"></table0_8>
      <table1_0 v-if="curr == '1_0'" ref="1_0" @reportSearch="reportSearch"></table1_0>
      <table1_1 v-if="curr == '1_1'" ref="1_1" @reportSearch="reportSearch"></table1_1>
      <table1_2 v-if="curr == '1_2'" ref="1_2" @reportSearch="reportSearch"></table1_2>
      <table1_3 v-if="curr == '1_3'" ref="1_3" @reportSearch="reportSearch"></table1_3>
      <table1_4 v-if="curr == '1_4'" ref="1_4" @reportSearch="reportSearch"></table1_4>
      <table1_5 v-if="curr == '1_5'" ref="1_5" @reportSearch="reportSearch"></table1_5>
      <table2_0 v-if="curr == '2_0'" ref="2_0" @reportSearch="reportSearch"></table2_0>
      <table2_1 v-if="curr == '2_1'" ref="2_1" @reportSearch="reportSearch"></table2_1>
      <table3_0 v-if="curr == '3_0'" ref="3_0" @reportSearch="reportSearch"></table3_0>
    </el-container>
  </el-container>
</template>

<script>
import table0_0 from './report/table0_0'
import table0_1 from './report/table0_1'
import table0_2 from './report/table0_2'
import table0_3 from './report/table0_3'
import table0_4 from './report/table0_4'
import table0_5 from './report/table0_5'
import table0_6 from './report/table0_6'
import table0_7 from './report/table0_7'
import table0_8 from './report/table0_8'
import table1_0 from './report/table1_0'
import table1_1 from './report/table1_1'
import table1_2 from './report/table1_2'
import table1_3 from './report/table1_3'
import table1_4 from './report/table1_4'
import table1_5 from './report/table1_5'
import table2_0 from './report/table2_0'
import table2_1 from './report/table2_1'
import table3_0 from './report/table3_0'
import { getLastDayOfMonth, getTestReport} from "@/api/report/basic";

export default {
  name: "report",
  components:{
        table0_0,
        table0_1,
        table0_2,
        table0_3,
        table0_4,
        table0_5,
        table0_6,
        table0_7,
        table0_8,
        table1_0,
        table1_1,
        table1_2,
        table1_3,
        table1_4,
        table1_5,
        table2_0,
        table2_1,
        table3_0,
      },
  data() {
    return {
      chartbtn: false,
      chartflag: false,
      select_state: true,
      showmonth: false,
      showdaterange: true,
      dateRange: [],
      btnIndex: 0,
      charValueTypeOptions:[],
      valueTypes: {
        select1_0:[{fcode:"receiveTimes",fcontent:"领图次数"},
                   {fcode:"receiveNum_4D",fcontent:"4D数据（幅）"},
                   {fcode:"receiveNum_TopographicMap",fcontent:"地形图（张）"},
                   {fcode:"receiveNum_Point",fcontent:"控制点（点）"},
                   {fcode:"receiveNum_DLGQ",fcontent:"地理国情数据（MB）"},
                   {fcode:"receiveNum_AerialImages",fcontent:"航摄影像（片）"},
                   {fcode:"receiveNum_SatelliteImages",fcontent:"卫星遥感影像（景）"},
                   {fcode:"receiveNum_JM",fcontent:"加密成果（个）"},
                   {fcode:"receiveNum_QTs",fcontent:"其他（幅\个）"}],
        select1_1:[{fcode:"receiveUnitNum",fcontent:"单位数量"},
                   {fcode:"receiveTimes",fcontent:"领取次数"},
                   {fcode:"receiveNum_F_D",fcontent:"领取数量（幅，点）"}],
        select1_2:[{fcode:"receiveTimes",fcontent:"领取次数"},
                   {fcode:"receiveNum",fcontent:"领取数量"}],
        select1_3:[{fcode:"receiveUnitNum",fcontent:"申领成果的单位数量（家）"},
                   {fcode:"receiveTimes",fcontent:"领取次数（次）"},
                   {fcode:"receiveNum_DXT",fcontent:"领取纸质地形图数量（幅）"},
                   {fcode:"receiveNum_4D",fcontent:"领取4D成果数量（幅）"},
                   {fcode:"receiveNum_Point",fcontent:"领取控制点成果数量（个）"}],
        select1_4:[{fcode:"receiveUnitNum",fcontent:"申领成果的单位数量（家）"},
                   {fcode:"receiveTimes",fcontent:"领取次数（次）"},
                   {fcode:"receiveNum",fcontent:"领取成果资料数量（幅，点）"}],
        select1_5:[{fcode:"receiveUnitNum",fcontent:"申领成果的单位数量（家）"},
                   {fcode:"receiveTimes",fcontent:"领取次数（次）"},
                   {fcode:"receiveNum",fcontent:"领取成果资料数量（幅，点）"}]
        },
      queryParams: {
          beginTime: "",
          endTime: "",
          selectMonth: "",
          chartValueType: "",
          chartValueTypeName: "",
          topNum: 10,
      },
      btnGroup: [
        {
          id: 0,
          name: "基础测绘成果管理与应用直报系统数据统计",
          type: [
            {
              id: "0",
              title: "数字线划地图（DLG）提供情况",
            },
            {
              id: "1",
              title: "数字正射影像（DOM）提供情况",
            },
            {
              id: "2",
              title: "数字高程模型（DEM）提供情况",
            },
            {
              id: "3",
              title: "数字栅格地图（DRG）提供情况",
            },
            {
              id: "4",
              title: "地形图提供情况",
            },
            {
              id: "5",
              title: "测绘基准成果提供情况",
            },
            {
              id: "6",
              title: "地理国情成果提供情况",
            },
            {
              id: "7",
              title: "航摄成果提供情况",
            },
            {
              id: "8",
              title: "卫星影像提供情况",
            },
          ],
        },
        {
          id: 1,
          name: "各类成果应用情况统计",
          type: [
            {
              id: "0",
              title: "领用单位统计",
            },
            {
              id: "1",
              title: "数据分发服务的行业统计",
            },
            {
              id: "2",
              title: "数据分发服务的典型应用统计",
            },
            {
              id: "3",
              title: "行政区划统计",
            },
            {
              id: "4",
              title: "国家（省市）级重点项目统计",
            },
            {
              id: "5",
              title: "国家（省市）级热点项目统计",
            },
          ],
        },
        {
          id: 2,
          name: "部门月报统计",
          type: [
            {
              id: "0",
              title: "月度统计",
            },
            {
              id: "1",
              title: "自定义统计",
            }
          ],
        },
        {
          id: 3,
          name: "分发统计汇总",
          type: [],
        },
      ],
      options: [],
      topNumOptions: [{fcode:10,fcontent:"TOP10"},{fcode:5,fcontent:"TOP5"},{fcode:3,fcontent:"TOP3"}],
      selectValue: "数字线划地图（DLG）提供情况",
      spanArr: [],
      spanArr1: [],
      formLabelAlign: {
        name: "",
        region: "",
        type: "",
      },
      curr: "0_0"
    };
  },
  mounted: function () {
    this.options = this.btnGroup[0].type;
    getTestReport().then(response => {
                 console.log("后端动作执行完毕！")
    });
  },
  methods: {
    getDefaultDate() {
      var nowDate = new Date();
      var y = nowDate.getFullYear();
      var m = nowDate.getMonth()+1;
      var d = nowDate.getDate();
      if (m >= 1 && m <= 9) {
              m = "0" + month;
      }
      var startDate = y + "-" + m + "-" + 1;
      var endDate = y + "-" + m + "-" + d;
      this.dateRange =[startDate,endDate];
      this.queryParams.selectMonth = y + "-" + m;
  //    this.reportSearch();
    },
    btnClick(item,i) {
      console.log(this.queryParams);
      this.options = item.type;
      if (item.id <= 1) {
        this.selectValue = item.type[0].title;
        this.select_state = true;
        this.showmonth = false;
        this.showdaterange = true;
      }else if(item.id == 2){
        this.selectValue = item.type[0].title;
        this.select_state = true;
        this.showmonth = true;
        this.showdaterange = false;
      }else if(item.id == 3){
        this.selectValue = item.name;
        this.select_state = false;
        this.showmonth = false;
        this.showdaterange = true;
      }else{
        this.selectValue = item.name;
        this.select_state = false;
        this.showmonth = true;
        this.showdaterange = false;
      }
      if(item.id == 1){
        this.chartbtn = true
      }else if(item.id == 2){
        this.chartbtn = true
      }else{
        this.chartbtn = false
      }
     // this.showdaterange = !this.showmonth;
      this.curr = i + '_0'
      this.btnIndex = i
      this.chartflag = false;
      if(this.chartbtn){
         console.log("this.valueTypes:"+this.valueTypes["select"+this.curr]);
         this.charValueTypeOptions = this.valueTypes["select"+this.curr];
         if((this.charValueTypeOptions)&&(this.charValueTypeOptions.length>0)){
            this.queryParams.chartValueType = this.charValueTypeOptions[0].fcode;
            this.queryParams.chartValueTypeName = this.charValueTypeOptions[0].fcontent;
         }
      }
    },
    selectChange(e) {
      this.options.forEach((item,index) =>{
        if(item.title == e){
          this.curr = this.btnIndex + '_' + index;
          return
        }
      })
      if(this.curr=="2_0"){
        this.showmonth = true;
        this.showdaterange = false;
      }else{
        this.showmonth = false;
        this.showdaterange = true;
      }
          this.chartflag = false;
          if(this.chartbtn){
             console.log("this.valueTypes:"+this.valueTypes["select"+this.curr]);
             this.charValueTypeOptions = this.valueTypes["select"+this.curr];
             if((this.charValueTypeOptions)&&(this.charValueTypeOptions.length>0)){
               this.queryParams.chartValueType = this.charValueTypeOptions[0].fcode;
               this.queryParams.chartValueTypeName = this.charValueTypeOptions[0].fcontent;
             }
          }
    },
    export2Excel() {
      this.$refs[this.curr].export2Excel(this.selectValue);
    },
    showChart(){
      if((this.curr!="2_0")&&(this.curr!="2_1")){
        this.chartflag = !this.chartflag;
      }
      this.$refs[this.curr].showchart(this.selectValue,this.queryParams);
    },
    reportSearch(){
       console.log("触发父页面reportSearch");
       if(this.showmonth){
          this.queryParams.beginTime = this.queryParams.selectMonth+"-01";
          this.queryParams.endTime = getLastDayOfMonth(this.queryParams.selectMonth);
          this.$refs[this.curr].getReportData(this.queryParams);
       }else{
          if(this.dateRange.length==0){
              this.getDefaultDate();
          }
          this.queryParams.beginTime = this.dateRange[0];
          this.queryParams.endTime = this.dateRange[1];
          this.$refs[this.curr].getReportData(this.queryParams);
       }
    },
    valueTypeChange(value){
      //  this.queryParams.chartValueType = this.charValueTypeOptions[0].fcode;
       var array1 = this.charValueTypeOptions.filter(function get(item) {
                                           return item.fcode==value;
                                       });
       if((array1)&&(array1.length>0)){
          this.queryParams.chartValueTypeName = array1[0].fcontent;
          this.$refs[this.curr].refreshchart(this.queryParams);
       }
    },

    topNumChange(value){
      //  this.queryParams.chartValueType = this.charValueTypeOptions[0].fcode;
      this.$refs[this.curr].refreshchart(this.queryParams);
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.page {
  height: 100%;
}
.el-container {
  height: 100%;
}
.el-header {
  background-color: #b3c0d1;
  display: flex;
  align-items: center;
}
.el-aside {
  background-color: #d3dce6;
}
.el-main {
  background-color: #e9eef3;
}
.el-aside {
  padding-top: 12px;
}
.left_row {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}
.left_btn {
  width: 160px;
  padding: 12px;
  white-space: normal;
}
.table0_0 .el-table__header-wrapper table thead>tr:nth-child(1)>th:nth-child(2) {
  border-right:none;
}
.table0_0 .el-table__header-wrapper table thead>tr:nth-child(1)>th:nth-child(2) div {
  padding-right: 0px;
}
.table0_0 .el-table__header-wrapper table thead>tr:nth-child(1)>th:nth-child(3) div{
  padding-left: 0px;
}
.header-row {
  width: 100%;
}
.header-row-right {
  display: flex;
  justify-content: flex-end;
}
.active{
  color: #409EFF;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
}
.ui-datepicker-trigger {
	margin-bottom:-5px;
}
</style>
